<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJS中的控制器</title>
		<style>
			.err{color: red;}
		</style>
	</head>

	<body>
		<div ng-app="" ng-controller="myCtrl">
			课程：<input id="ipt1" type="text" ng-model="course.title"><span id="sp1">0</span>
			<span id="err1" class="err">错误</span>
			<br> 报名：
			<input id="ipt2" type="text" ng-model="course.enroll"><span id="sp2">0</span>
			<span id="err2" class="err">错误</span>
			<br>
			<hr> 课程报名信息：
			<span class="text">{{course.result()}}</span>
		</div>
		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular.min.js"></script>
		<script>
			var ipt1 = document.getElementById("ipt1");
			var ipt2 = document.getElementById("ipt2");
			var span1 = document.getElementById("sp1");
			var span2 = document.getElementById("sp2");
			var err1 = document.getElementById("err1");
			var err2 = document.getElementById("err2");

			//控制器使用Javascript来定义，如下：
			function myCtrl($scope) {
				$scope.course = { //定义一个course对象
					title: "AngularJS入门",
					enroll: 20,
					result: function() {
						var ipt1Len = ipt1.value.length;
						var ipt2Val = ipt2.value;
						var ipt2Len = ipt2Val.length;
						if (ipt1Len > 20) {
							err1.innerHTML = "课程名称不能超过20个字";
						}else{
							err1.innerHTML = "";
						}
						if (ipt2Len > 20) {
							err2.innerHTML = "报名不能超过20个字";
						}else{
							err2.innerHTML = "";
						}
						span1.innerHTML = ipt1.value.length + "/20";
						span2.innerHTML = ipt2.value.length + "/20";
						//定义一个方法：这个方法返回组装的字符串
						var courseObj;
						courseObj = $scope.course;
						return courseObj.title + " " + courseObj.enroll + "人报名中";
					}
				};
			}
		</script>
	</body>

</html>